<template>
  <view>
    <view style="padding-bottom: 80px" v-if="listData.length > 0">
      <view class="cu-card-wrap" v-for="(item, index) in listData" :key="item.projectInfoId">
        <view class="body-wrap">
          <view class="content-wrap">
            <view class="label">项目编号：</view>
            <view class="value">{{ item.projectCode }}</view>
          </view>
          <view class="content-wrap">
            <view class="label">项目名称：</view>
            <view class="value">{{ item.projectName }}</view>
          </view>
          <view class="content-wrap">
            <view class="label">所属部门：</view>
            <view class="value">{{ item.deptName }}</view>
          </view>
          <view class="content-wrap">
            <view class="label">项目日期：</view>
            <view class="value">{{ item.projectDate }}</view>
          </view>
          <view class="content-wrap">
            <view class="label">审批状态：</view>
            <view class="value">{{ item.checkStatusLabel }}</view>
          </view>
          <view class="content-wrap">
            <view class="label">当前待办人：</view>
            <view class="value">{{ item.checkStatus === '2' ? '' : item.auditorName }}</view>
          </view>
          <view class="content-wrap">
            <view class="label">项目进度：</view>
            <view class="value">{{ item.workProgressLabel }}</view>
          </view>
        </view>
        <view class="footer-wrap">
          <view class="button-wrap button-wrap-todo">
            <view class="flex justify-end w-full">
              <view class="button" @click="handleDetail(item)">查看</view>
              <template v-if="item.createBy === staffId">
                <view v-if="item.workProgress === '3' && item.checkStatus === '2'" class="button">完结</view>
              </template>
              <view
                v-if="item.auditorId === staffId && item.checkStatus === '1'"
                class="button"
                @click="handleApprove(item)"
                >审批</view
              >
              <view v-if="item.workProgress === '1'" class="button" @click="cancelProject(item)">取消</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <Empty></Empty>
    </view>
    <view class="submit-group">
      <button class="u-button block" :ripple="true" @click="handleAdd">新增</button>
    </view>
    <filter-project ref="cuFilter" @submit="filterSubmit" />
  </view>
</template>

<script>
import Empty from '@/components/cu-empty/index.vue'
import { mapGetters } from 'vuex'
import { projectCancel, queryWorkProject } from '@/api/spw/project'
import FilterProject from './components/FilterProject.vue'
export default {
  components: {
    FilterProject,
    Empty
  },
  data() {
    return {
      listData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      isFinished: false,
      loading: false,
      searchParams: {}
    }
  },
  computed: {
    ...mapGetters(['staffId'])
  },
  // 筛选按钮点击
  onNavigationBarButtonTap(e) {
    this.$refs.cuFilter.toggle()
  },
  onLoad() {
    this.initData()
  },
  onPullDownRefresh() {
    this.initData()
  },
  onReachBottom() {
    this.getList()
  },
  methods: {
    handleAdd() {
      uni.navigateTo({
        url: '/pages/jobSlip/project/form',
        events: {
          'project:create:success': (data) => {
            if (data) {
              this.initData()
            }
          }
        }
      })
    },
    filterSubmit(params) {
      this.searchParams = JSON.parse(JSON.stringify(params))
      if (this.searchParams.date?.length) {
        this.searchParams.projectBeginDate = this.searchParams.date[0]
        this.searchParams.projectEndDate = this.searchParams.date[1]
      }
      this.initData()
    },
    initData() {
      this.listData = []
      this.isFinished = false
      this.loading = false
      this.pageNum = 1
      this.pageSize = 10
      this.getList()
    },
    async getList() {
      if (this.isFinished || this.loading) {
        return
      }
      this.loading = true
      const data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        ...this.searchParams
      }

      const res = await queryWorkProject(data)
      if (data.pageNum === 1) {
        this.listData = res.rows
      } else {
        this.listData.push(...res.rows)
      }
      this.isFinished = res.rows.length < this.pageSize
      this.loading = false
      uni.stopPullDownRefresh()
      this.pageNum++
    },
    handleDetail(item) {
      uni.navigateTo({
        url: `/pages/jobSlip/project/detail?projectInfoId=${item.projectInfoId}`
      })
    },
    handleFinished(item) {
      uni.navigateTo({
        url: `/pages/jobSlip/project/finished?projectId=${item.projectId}`,
        events: {
          'project:finished:success': (data) => {
            if (data) {
              this.initData()
            }
          }
        }
      })
    },
    handleApprove(item) {
      uni.navigateTo({
        url: `/pages/jobSlip/project/detail?type=approve&projectInfoId=${item.projectInfoId}`,
        events: {
          'callback:success': (data) => {
            if (data) {
              this.initData()
            }
          }
        }
      })
    },
    cancelProject(item) {
      uni.showModal({
        title: '提示',
        content: '是否取消项目？',
        showCancel: true,
        confirmText: '确定',
        success: (res) => {
          if (res.confirm) {
            projectCancel(item.projectInfoId).then(() => {
              this.initData()
              this.$modal.showToast('取消成功')
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.button-wrap-todo {
  align-items: center;
  justify-content: space-between;
  width: 100%;

  .button-wrap-left {
    display: flex;
    align-items: center;

    > view {
      margin-right: 16rpx;
      margin-left: 0;
    }
  }
}

.button-wrap {
  .status-button {
    border: 1rpx solid #88b4c4;
    color: #88b4c4;

    &.active {
      border: 1rpx solid #c87c32;
      color: #c87c32;
    }
  }
}

.cu-card-wrap {
  margin-bottom: 24rpx;
  position: relative;

  &:first-child {
    margin-top: 24rpx;
  }
}
</style>
